<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-width="120px"
  >
    <el-form-item label="客户名称" prop="customerName">
      <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
    </el-form-item>
    
    <el-form-item label="联系电话" prop="contactPhone">
      <el-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
    </el-form-item>
    
    <el-form-item label="联系邮箱" prop="contactEmail">
      <el-input v-model="formData.contactEmail" placeholder="请输入联系邮箱" />
    </el-form-item>
    
    <el-form-item label="地址" prop="address">
      <el-input v-model="formData.address" type="textarea" placeholder="请输入地址" />
    </el-form-item>
    
    <el-form-item label="客户等级" prop="customerLevel">
      <el-select v-model="formData.customerLevel" placeholder="请选择客户等级">
        <el-option label="普通" :value="1" />
        <el-option label="重要" :value="2" />
        <el-option label="VIP" :value="3" />
      </el-select>
    </el-form-item>
    
    <el-form-item label="行业类型" prop="industryType">
      <el-input v-model="formData.industryType" placeholder="请输入行业类型" />
    </el-form-item>
    
    <el-form-item label="客户来源" prop="source">
      <el-input v-model="formData.source" placeholder="请输入客户来源" />
    </el-form-item>
    
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="formData.status">
        <el-radio :label="1">活跃</el-radio>
        <el-radio :label="0">非活跃</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm">
        提交
      </el-button>
      <el-button @click="resetForm">
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      customerName: '',
      contactPhone: '',
      contactEmail: '',
      address: '',
      customerLevel: 1,
      industryType: '',
      source: '',
      status: 1,
      remark: ''
    })
  }
})

const formRef = ref(null)
const formData = ref({ ...props.initialData })

// 监听initialData变化
watch(() => props.initialData, (newVal) => {
  formData.value = { ...newVal }
}, { deep: true })

const rules = {
  customerName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' }
  ],
  contactPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  contactEmail: [
    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  customerLevel: [
    { required: true, message: '请选择客户等级', trigger: 'change' }
  ]
}

const emit = defineEmits(['submit'])

const submitForm = async () => {
  try {
    await formRef.value.validate()
    emit('submit', formData.value)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const resetForm = () => {
  formRef.value.resetFields()
}
</script>